<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Image gallery</title>
<style>
body{background-color:black;color:white;}
#gallery{width:700px;height:600px;margin:10px auto;border:1px solid white;}
#title_bar{border-bottom:1px solid white;height:30px;vertical-align:middle}
.close_btn{float:right;background:url(../images/gallery/bg.gif) 0px 0px;height:20px;width:20px;}
.title_text{font-weight:bold;font-size:14px;}
#large_images{height:400px;clear:both;overflow:hidden}
#l_left{width:50px;float:left;height:100%;text-align:center;}
#l_left_btn{background:url(../images/gallery/bg.gif) repeat scroll 0px -88px;height:33px;width:29px;margin:170px auto;cursor:pointer;}
#l_images{width:600px;float:left;height:100%;}
#l_images img{width:600px;height:400px;}
#l_right{width:50px;float:left;height:100%;text-align:center;}
#l_right_btn{background:url(../images/gallery/bg.gif) repeat scroll 0px -141px;height:33px;width:29px;margin:170px auto;cursor:pointer;}

#small_images{margin-top:10px;padding:5px 0px;height:150px;background-color:#ececec;overflow:hidden}
#s_left{height:100%;width:50px;float:left;text-align:center;line-height:100%;vertical-align:middle}
#s_left_btn{background:url(../images/gallery/bg.gif) 0px -198px;height:32px;width:9px;margin:60px auto;cursor:pointer;}
#s_images{height:100%;width:600px;float:left;overflow:hidden;white-space:nowrap}
#s_images img{width:140px;height:150px;cursor:pointer;opacity:.5;filter:alpha(opacity=50);}
#s_right{height:100%;width:50px;float:left;}
#s_right_btn{background:url(../images/gallery/bg.gif) 0px -249px;height:32px;width:9px;margin:60px auto;cursor:pointer;}
#s_images img.cur{border:1px solid black;opacity:1.0;filter:alpha(opacity=100);}
</style>
</head>

<body>
<div id="gallery">
	<div id="title_bar">
		<div class="close_btn"></div>
		<div class="title_text">image gallery</div>
	</div>
	<div id="large_images">
		<div id="l_left"><div id="l_left_btn"></div></div>
		<div id="l_images">
			<img id="img_obj" src="../images/gallery/p1.jpg" />
		</div>
		<div id="l_right"><div id="l_right_btn"></div></div>
	</div>
	<div id="small_images">
		<div id="s_left"><div id="s_left_btn"></div></div>
		<div id="s_images">
			<img src="../images/gallery/p1.jpg" class="cur" />
			<img src="../images/gallery/p2.jpg" />
			<img src="../images/gallery/p3.jpg" />
			<img src="../images/gallery/p4.jpg" />
			<img src="../images/gallery/p5.jpg" />
			<img src="../images/gallery/p1.jpg" />
			<img src="../images/gallery/p2.jpg" />
			<img src="../images/gallery/p3.jpg" />
			<img src="../images/gallery/p4.jpg" />
			<img src="../images/gallery/p5.jpg" />
		</div>
		<div id="s_right"><div id="s_right_btn"></div></div>
	</div>
</div>
<script>
function $(id){return document.getElementById(id)}
var s_box = $('s_images'),l_box = $('l_images'),img_obj = $('img_obj')
var s_images = s_box.getElementsByTagName('img'),img_count = s_images.length
var s_width = s_box.offsetWidth,ss_width = s_box.scrollWidth
var max_scroll_left = ss_width - s_width
var move_width=0,thread = null,img_width = 140

function clear_thread(){
	if(thread) clearTimeout(thread);
	move_width=0
}
function move_left(max_width){
	if(s_box.scrollLeft<=0){s_box.scrollLeft=0}
	else{
		if(move_width<max_width){
			s_box.scrollLeft-=10;
			thread = setTimeout(function(){move_left(max_width)},50)
			move_width+=10
		}else{move_width=0}
	}
}
function move_right(max_width){
	if(s_box.scrollLeft>=max_scroll_left){s_box.scrollLeft=max_scroll_left}
	else{
		if(move_width<max_width){
			s_box.scrollLeft+=10;
			thread = setTimeout(function(){move_right(max_width)},50)
			move_width+=10
		}else{move_width=0}
	}
}
function move_left_to(final_width){
	if(s_box.scrollLeft<=final_width){s_box.scrollLeft = final_width}
	else{
		s_box.scrollLeft-=10;
		thread = setTimeout(function(){move_left_to(final_width)},50)
	}
}
function move_right_to(final_width){
	if(s_box.scrollLeft>=final_width){s_box.scrollLeft = final_width}
	else{
		s_box.scrollLeft+=10;
		thread = setTimeout(function(){move_right_to(final_width)},50)
	}
}
function move_to(cur_idx){
	var d_idx = cur_idx-2,cur_width = s_box.scrollLeft,final_width
	if(d_idx<0) d_idx = 0;
	final_width = d_idx*img_width
	if(cur_width==final_width){return}
	else if(final_width>cur_width){
		clear_thread()
		move_right_to(final_width)
	}else if(final_width<cur_width){
		clear_thread()
		move_left_to(final_width)
	}
}

$('l_left_btn').onclick = function(){
	var cur_s_img,cur_idx,_img,pre_s_img,pre_idx
	for(var i=0;i<img_count;i++){
		_img = s_images[i]
		if(_img.className.indexOf('cur')!=-1){
			cur_s_img = _img
			cur_idx = i
		}
		_img.className = ''
	}
	pre_idx = cur_idx-1
	if(pre_idx<0) pre_idx=img_count-1
	pre_s_img = s_images[pre_idx]
	pre_s_img.className = 'cur'
	img_obj.src = pre_s_img.src
	move_to(pre_idx)
}

$('l_right_btn').onclick = function(){
	var cur_s_img,cur_idx,_img,next_s_img,next_idx
	for(var i=0;i<img_count;i++){
		_img = s_images[i]
		if(_img.className.indexOf('cur')!=-1){
			cur_s_img = _img
			cur_idx = i
		}
		_img.className = ''
	}
	next_idx = cur_idx+1
	if(next_idx>=img_count) next_idx=0
	next_s_img = s_images[next_idx]
	next_s_img.className = 'cur'
	img_obj.src = next_s_img.src
	move_to(next_idx)
}

$('s_left_btn').onclick = function(){
	clear_thread()
	move_left(s_width)
}
$('s_right_btn').onclick = function(){
	clear_thread()
	move_right(s_width)
}

for(var i=0,len=img_count;i<len;i++){
	s_images[i].onclick = function(e){
		return function(){
			for(var j=0,len=s_images.length;j<len;j++){
				s_images[j].className = ''
			}
			this.className = 'cur'
			img_obj.src = this.src
			move_to(e)
		}
	}(i)
}


</script>
</body>
</html>
